import React , { Component } from "react";

import Base from "./Base"
import HKBall from "../../BallStyle/HKBall"
export default class BB extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[]
    }
 }
  baseinfo(){
    return [
      {name:"色波"},
      {name:"半波"},
      {name:"半半波"}
    ]
  }
  sebo(){
    return [
      {name:"红波",ball:[1,2,7,8,12,13,18,19,23,24,29,30,34,35,40,45,46]},
      {name:"蓝波",ball:[3,4,9,10,14,15,20,25,26,31,36,37,41,42,47,48]},
      {name:"绿波",ball:[5,6,11,16,17,21,22,27,28,32,33,38,39,43,44,49]}
    ]
  }
 show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
 seborender(){
   return this.sebo().map((item,index)=>{
     return  <div className="sebo" key={index}>
              <div className="sebotitle">{item.name}</div>
              <div className="seboqiu" >
                 {
                  item.ball.map((ele,i)=>{
                    return <span key={i}>
                          <HKBall num={ele*1} ></HKBall>
                    </span>
                  })
                }
             </div>
     </div>
   })
 }
  render(){
    const {content} = this.props;
    console.log(content);
    
    let baseinfo = this.baseinfo()
    let page = content.length / 2
     return  <div className="panl">
{          this.baseinfo().map((item,index)=>{
            return  <div className="panel" key={index}>
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(index)
              }}>
              <i className={this.state.isShow.indexOf(index)>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>
 
              </div>
              {item.name}
            </div>
            <div className={this.state.isShow.indexOf(index)>-1 ? "panel_body hidden" : "panel_body"}>
            {
            index == 0 ? this.seborender() : <Base {...this.props} content={content.slice((index-1)*page,index*page)}></Base>
            }
            
            </div>
          </div>
          })
}
      </div>
 

  }
}